<template>
	<!-- <u-popup mode="bottom" v-model="visible" border-radius="26" @close="close">
		
	</u-popup> -->
	<view v-if="show">
		<u-mask :show="show" zIndex="990" @click="close"></u-mask>
		<view class="u-position-fixed popContent">
			<view class="u-font-36 text-bold box-title u-text-center">{{isCityEdit ? '编辑' : '新增'}}城市</view>
			<view class="u-padding-left-72 u-padding-right-72">
				<!-- 授权城市 -->
				<template v-if="isCity && show"> 
					<label-box label="售卖城市" labelWidth="260">
						<select-item v-model="form.address" mode="popSelectCity" v-if="show" :comfirm="true"  @getSelect="getSelectCity" :disabled="isCityEdit"></select-item>
					</label-box>
					<label-box label="该城市总计本数" labelWidth="260">							
						<u-input v-model="form.totalNumber" type="number"  :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" 
						placeholder="请输入" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
					</label-box>
					<label-box label="该城市已授权本数" labelWidth="260">							
						<u-input v-model="form.grantNumber" type="number"  :clearable="false" border :borderColor="currentThemeObj.inputBorderColor" 
						placeholder="请输入" :placeholder-style="`color:${currentThemeObj.placeholderColor}`"/>
					</label-box>
				</template>
				<!-- 预约发车 -->
				<template v-if="isCarCity">
					<label-box label="授权城市" labelWidth="230">
						<select-item :comfirm="true" v-model="form.address" mode="popSelectCity" @getSelect="getSelectCity"></select-item>
					</label-box>
					<label-box label="上车人数" labelWidth="230">
						<u-input v-model="form.count" type="number" :clearable="false" border
							:borderColor="currentThemeObj.inputBorderColor" placeholder="请输入"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`" />
					</label-box>
				</template>
				<view class="double-box-btns u-flex u-margin-top-32">
					<view class="reset-btn double-btn u-flex-1 u-font-32 box-title text-bold" @click="reset">
						{{isCityEdit ? '删除' : '取消'}}
					</view>
					<view class="confirm-btn double-btn u-flex-1 u-font-32 text-white text-bold" @click="confirm">
						{{isCityEdit ? '修改' : '保存'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const defaultForm = {
		address:'',
		totalNumber:"",
		count:'',
		grantNumber:""
	}
	import selectCityMixins from '@/mixins/selectMixins.js'
	export default {
		mixins:[selectCityMixins],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			isCityEdit:{ //是否编辑状态
				type:Boolean,
				default: false
			},
			value:{
				type:Object,
				default: ()=>(defaultForm)
			},
			isCity:{ //是否为城限独家添加授权城市
				type:Boolean,
				default: false
			},
			isCarCity:{ //是否为发车添加授权城市
				type:Boolean,
				default: false
			},
			//是否为城限城市（索引列表/pages/addLarp/addCity）那样的二维数组使用该组件
			isCityListGroup:{
				type:Boolean,
				default: true
			}
		},
		data() {
			return {
				visible: false,
				form:defaultForm
			}
		},
		watch:{
			show(){
				this.visible = this.show
				this.form = this.value || defaultForm
			}
		},
		created() {
			this.visible = this.show
			this.form = this.value
		},
		methods: {
			close() {
				this.$emit('close',this.visible)
				this.form = defaultForm;
				this.$emit('input',this.form)
			},
			reset(){
				if(this.isCityEdit){
					uni.showModal({
						title:'温馨提示',
						content:'是否删除该城市？',
						success:({confirm})=> {
							if(confirm) this.$emit('remove',this.form)
						}
					})
				}else{
					this.close()
				}
			},
			confirm(){
				// console.log("this.form: " + JSON.stringify(this.form));
				this.$emit('input',this.form)
				this.$emit('confirm',this.form)
			}
		},
	}
</script>

<style scoped lang="scss">
	.popContent{
		background-color: white;
		border-radius: 26rpx 26rpx 0 0 ;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
	.box-title{
		line-height: 120rpx;
	}
	.double-box-btns{
		margin-bottom: 60rpx;
		.double-btn{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.reset-btn{
			background: var(--background-second-color);
			border-radius: 44rpx 0 0 44rpx;
		}
		.confirm-btn{
			background: var(--theme-color);
			border-radius: 0 44rpx 44rpx 0;
		}
	}
</style>
